// 全局指令

// vue定义
// 指令api的变化

/* Vue.directive('指令名称',{
    // 指令挂载到dom会自动触发
    inserted(el){
      // el指的就是真实的dom元素
    }
})
*/

/*
createApp().directive('指令名称', {
  mounted (el, binding) {
    // el: 指令挂载的那个dom元素
    // binding.value: 指令=后面绑定的表达式的值
  }
})
 */

// 插件

// 1. 函数定义  2.对象定义

/* const plugin = {
  install (Vue) {
    Vue.component()
    Vue.directive()
    Vue.prototype.$http = function () {}
  }
}

function plugin1 (Vue) {}

Vue.use(plugin)

*/

// vue3
// 1. install方法参数的位置从 Vue -> app
// 2. 注册的时候  通过createApp().use(plugin)

// 实现在vue3下面的插件编写 在插件内部实现一下图片懒加载指令
import { useIntersectionObserver } from '@vueuse/core'
export const directivePlugin = {
  install (app) {
    console.log(app)
    // app.directive  进行全局指令注册
    app.directive('img-lazy', {
      mounted (el, binding) {
        console.log(el, binding.value)
        // 懒加载的核心逻辑
        // 思路: 判断图片是否进入到视口区域 进来就正式加载图片
        // 实现方案: 1. 如何得知图片进入视口了？  2.如何能让图片开始加载？ -> src赋值
        const { stop } = useIntersectionObserver(
          el, // 监听谁就把谁放过来
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 监听的元素进入视口就是true 否则就是false
            // 比较严格 纵向和横向都会监听
            // 每次进来视口和出去视口都会重复执行
            // 如果我们想停止监听  手动调用stop方法
            console.log(isIntersecting)
            if (isIntersecting) {
              el.src = binding.value
              stop()
            }
          }
        )
      }
    })
  }
}
